﻿<div class="doc-menu">
    <div class="menus">
        @if (Items != null && Items.Count > 0)
        {
            foreach(var menu in Items)
            {
                <details open>
                    <summary class="title">@menu.Name</summary>
                    <ul>
                        @foreach (var item in menu.Children)
                        {
                            var cls = CurItem == item.Id ? "active" : "";
                            <li class="@cls" @onclick="@(e => OnMenuItemClick(item))">@FormatName(item)</li>
                        }
                    </ul>
                </details>
            }
        }
    </div>
</div>

@code {
    [Parameter] public string? CurItem { get; set; }
    [Parameter] public List<MenuItem>? Items { get; set; }
    [Parameter] public Action<MenuItem>? OnItemClick { get; set; }
    [Parameter] public Func<MenuItem, string>? OnFormatItem { get; set; }

    private void OnMenuItemClick(MenuItem item)
    {
        CurItem = item.Id;
        OnItemClick?.Invoke(item);
    }

    private string? FormatName(MenuItem item)
    {
        if (OnFormatItem != null)
            return OnFormatItem?.Invoke(item);
        else
            return item.Name;
    }
}